<template>
    <div class="madp-product">
        <el-table
            width="80%"
            :data="tableData"
            :header-cell-style="{
                background: 'rgb(255, 191, 191)',
                color: 'rgb(44,44,44)'
            }"
            stripe
        >
            <el-table-column v-for="(item, idx) in tableProp[menuId]" :key="idx" :prop="item.props" :label="item.label" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row[item.props] }}{{ item.props == 'rate' ? '%' : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button v-if="permissions.cp_deposit_edit" type="text" @click="onEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :close-on-click-modal="false" title="编辑" :visible.sync="showDialog" width="55%">
            <div class="dialog-container">
                <template>
                    <el-form ref="form" :model="dialogInfo" label-width="160px" :rules="formRules">
                        <el-form-item v-for="(item, idx) in tableProp[menuId]" :key="idx" :prop="item.props" :label="item.label">
                            <el-input v-model.trim="dialogInfo[item.props]" placeholder="请输入内容" style="width: 350px" />
                            <span>{{ item.props == 'rate' ? '%' : '' }}</span>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="showDialog = false">取 消</el-button>
                        <el-button type="primary" @click="confirm">确 定</el-button>
                    </span>
                </template>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import storeApi from '@/api/store/store.js';
import { mapGetters } from 'vuex';

export default {
    components: {},
    data() {
        return {
            blackTableLoading: false,
            tableData: [],
            dialogInfo: {},
            showDialog: false,
            tableProp: {
                31: [
                    {
                        label: '存款区间',
                        props: 'descr',
                        rules: [{ required: true, message: '请输入' }]
                    },
                    {
                        label: '利率',
                        props: 'rate'
                    }
                ],
                32: [
                    {
                        label: '期限',
                        props: 'descr'
                    },
                    {
                        label: '利率',
                        props: 'rate'
                    }
                ],
                33: [
                    {
                        label: '通知频率',
                        props: 'descr'
                    },
                    {
                        label: '利率',
                        props: 'rate'
                    }
                ],
                34: [
                    {
                        label: '大额存单',
                        props: 'descr'
                    },
                    {
                        label: '利率',
                        props: 'rate'
                    }
                ],
                35: [
                    {
                        label: '期限',
                        props: 'descr'
                    },
                    {
                        label: '利率',
                        props: 'rate'
                    }
                ],
                36: [
                    {
                        label: '期限',
                        props: 'descr'
                    },
                    {
                        label: '利率',
                        props: 'rate'
                    }
                ]
            },
            formRules: {
                descr: [{ required: true, message: '请输入内容', trigger: 'blur' }, { max: 20, min: 1, message: '字符在1-20位之间', trigger: 'blur' }],
                rate: [
                    { required: true, message: '请输入利率', trigger: 'blur' },
                    {
                        pattern: /^(0|([1-9]\d?))(\.\d{1,3})?$/,
                        message: '请输入正数(整数最多2位,小数点后保留最多三位)',
                        trigger: 'blur'
                    }
                ]
            }
        };
    },
    computed: {
        ...mapGetters({
            permissions: 'permissions'
        })
    },
    watch: {
        isUpdate: function() {
            if (this.isUpdate) {
                this.getDepositList();
            }
        },
        menuId: function() {
            this.getDepositList();
        }
    },
    props: {
        isUpdate: {
            type: Boolean,
            default: false
        },
        state: {
            type: Number | String,
            default: 1 // 1-已发布 0-未发布和未编辑
        },
        menuId: {
            // 菜单id
            type: Number | String,
            default: ''
        }
    },
    created() {},
    mounted() {
        this.getDepositList();
    },
    methods: {
        onEdit(info) {
            this.dialogInfo = JSON.parse(JSON.stringify(info));
            this.showDialog = true;
            this.$nextTick(() => {
                this.$refs.form.clearValidate();
            });
        },
        confirm() {
            this.$refs.form.validate((valid) => {
                if (!valid) return;
                storeApi
                    .depositEdit(this.dialogInfo)
                    .then((res) => {
                        this.getDepositList();
                        this.showDialog = false;
                        this.$message.success('修改成功');
                        this.$emit('update:isUpdate', false);
                        this.blackTableLoading = false;
                    })
                    .catch(() => {
                        this.$emit('update:isUpdate', false);
                        this.blackTableLoading = false;
                    });
            });
        },
        // 获取产品列表
        getDepositList() {
            this.blackTableLoading = true;
            storeApi
                .depositList({
                    type: this.menuId
                })
                .then((res) => {
                    this.tableData = res.data.data;
                    this.$emit('update:isUpdate', false);
                    this.blackTableLoading = false;
                })
                .catch(() => {
                    this.$emit('update:isUpdate', false);
                    this.blackTableLoading = false;
                });
        }
    }
};
</script>
<style scoped lang="scss">
.madp-product {
    width: 60%;
}
.madp-black-pagination {
    text-align: right;
    margin: 20px;
}
.dialog-container {
    text-align: right;
}
/deep/.el-form-item__content {
    display: flex;
    align-items: center;
}
/deep/.el-tree-node__content {
    height: 25px !important;
}

.show-image {
    display: flex;
    flex-wrap: wrap;
    .add-image {
        width: 120px;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        border: 1px solid #eee;
        .icon-plus {
            font-size: 30px;
        }
    }
    .up-image {
        position: relative;
        width: 120px;
        height: 120px;
        border: 1px solid #eee;
        margin-right: 10px;
        .close-btn {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 28px;
            background: rgba($color: #000000, $alpha: 0.2);
            border-radius: 50%;
            .icon-close {
                font-size: 16px;
            }
        }
        img {
            width: 100%;
            height: 100%;
        }
        .close-btn:hover {
            cursor: pointer;
        }
    }
    .add-image:hover {
        cursor: pointer;
    }
}
</style>
